import Qfpage from "../../components/Qfpage/Qfpage"
import './style.scss'
import { InputNumber, Button, Space, Table, Drawer, Form, Input, Col, message, Popconfirm } from "antd"
import { useMemo, useState, useEffect, useRef } from "react";
import { getAllType, addType, delType, editType } from '../../api/roomType'
import { get, values } from "lodash";

const Room = () => {
    const [data, setData] = useState([])
    // 每页显示数量
    const [limit, setLimit] = useState(20)
    // 页数显示
    const [page, setPage] = useState(1)

    //发送ajax获取参数
    const getDate = async () => {
        // handleDelete(key)
        let res = await getAllType({ limit, page })
        const { success, data, count } = res
        if (success) setData(data)
    }

    useEffect(() => {
        getDate()
    }, [])

    //  房间数据的类型
    const columns = useMemo(() => [
        { title: '房型', dataIndex: 'name', key: "name" },
        { title: '价格', dataIndex: 'price', key: "price" },
        { title: '床数', dataIndex: 'beds', key: "beds" },
        {
            title: '押金',
            dataIndex: 'yaPrice',
            key: "yaPrice"
        },
        { title: '简称', dataIndex: 'shortName', key: "shortName" },
        { title: '入住人数', dataIndex: 'liveLimit', key: "liveLimit" },
        { title: '早餐卷数', dataIndex: 'couponNum', key: "couponNum" },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Popconfirm title="真的要删除吗?" onConfirm={() => handleDelete()}>
                    <Button>修改</Button>
                    <Button>删除</Button>
                </Popconfirm>
            ),
        },
    ], [])

    //  弹框中表单添加的数据获取  可以用在修改表单中
    // 只需要给Form组件添加个form={form},就可以获取任意有name的Form.Item内输入框的值
    const [form] = Form.useForm();
    // const nameValue = Form.useWatch('name', form);

    const formRef = useRef(null)

    // 表单验证
    const rules = {
        required: '${label}是必填!',
        types: { number: '不是有效${label}!' }
    };

    // 添加房型
    const [showAdd, setShowAdd] = useState(false)
    // 弹出框确定按钮
    const handleAdd = async () => {
        // 判断是否验证成功
        try {
            // 获取弹出框中表单所有值
            const values = await form.validateFields();
            //  发送ajax请求
            let res = await addType(values)
            const { success } = res
            if (!success) return message.error('添加失败')
            message.success("添加成功")
            // 刷新表格
            getDate()
            // 关闭抽屉
            setShowAdd(false);
        } catch (errorInfo) {
            return
        }
    }

    // //删除单个房间
    // const handleDelete = () => {
    //     // setData(newData);
    //     console.log(data);
    //     // return newData
    // };

    // 显示弹出框
    const showLargeDrawer = () => {
        setShowAdd(true);
    };

    // 弹出框取消和X按钮
    const onClose = () => {
        setShowAdd(false);
    };
    return (
        <Qfpage title="房间维护">
            <div className="roomBox">
                <div style={{ padding: '15px' }}>
                    <Button onClick={showLargeDrawer}>添加房型</Button>
                </div>

                {/* 添加房间的弹出框 */}
                <Drawer
                    forceRender={true}
                    // 关闭抽屉时清空内数据
                    destroyOnClose
                    title={`添加房间信息`}
                    placement="right"
                    width={600}
                    // 抽屉里 X 时执行的函数
                    onClose={onClose}
                    visible={showAdd}
                    extra={
                        <Space>
                            <Button onClick={onClose}>取消</Button>
                            <Button type="primary" onClick={handleAdd}>确定</Button>
                        </Space>
                    }
                >
                    <Form
                        form={form}
                        // 表单排列样式
                        layout="horizontal"
                        ref={formRef}
                        // 表单验证
                        validateMessages={rules}
                    >
                        <Form.Provider resetFields>
                            <Form.Item
                                label="房型"
                                name="name"
                                rules={[{ required: true }]}
                            >
                                <Col span={10}>
                                    <Input size="40" placeholder="请填写房型" />
                                </Col>
                            </Form.Item>
                            <Form.Item
                                label="价格"
                                name="price"
                                rules={[{ required: true }]}
                            >
                                <Col span={10}>
                                    <Input placeholder="请填写价格" />
                                </Col>
                            </Form.Item>
                            <Form.Item
                                label="押金"
                                name="yaPrice"
                                rules={[{ required: true }]}
                            >
                                <Col span={10}>
                                    <Input placeholder="请填写押金" />
                                </Col>
                            </Form.Item>
                            <Form.Item label="简称" name="shortName">
                                <Col span={10}>
                                    <Input placeholder="请填写简称" />
                                </Col>
                            </Form.Item>

                            <Form.Item label="床数" name="beds">
                                <InputNumber min={1} defaultValue={0} />
                            </Form.Item>
                            <Form.Item label="入住人数" name="liveLimit">
                                <InputNumber min={1} defaultValue={0} />
                            </Form.Item>
                            <Form.Item label="早餐卷数量" name="couponNum">
                                <InputNumber min={0} defaultValue={0} />
                            </Form.Item>
                        </Form.Provider>
                    </Form>
                </Drawer>

                {/* 页面表格 */}
                <Table
                    columns={columns}
                    dataSource={data}
                >
                </Table>

            </div>
        </Qfpage>
    )
}

export default Room 
